<template>
	<view>
		<view class="top">
			<view class="icon"></view>
			<view class="title">
				登录
			</view>
		</view>
		<view class="main">
			<view class="content">
				<view class="user">
					<view class="icon"></view>
					<input type="text" v-model="userId" placeholder="请输入用户账号" maxlength="12" />	
				</view>
				<view class="password">
					<view class="icon"></view>
					<input type="text" @keydown.enter="onLogin" v-model="userPassword" :password="filled" password="ture" placeholder="请输入密码" />
				</view>
			</view>
			<view class="forget">
				忘记密码
				</view>
			<view class="button">
				<button class="login" @click="onLogin()">登 录</button>
				<button class="register" @click="onRegister()">注 册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:'',
				userPassword:'',
				admin:{
					sId:'',
					sPassword:'',
					
				}
			}
		},
		onLoad(){
			
		},
		methods: {
			onRegister(){
				uni.navigateTo({
					url:'./register'
				})
			},
			
			onLogin(){
				this.$set(this.admin,'sId',this.userId);
				this.$set(this.admin,'sPassword',this.userPassword);
				console.log("拿到的学号是"+this.admin.sId);
				console.log("拿到的密码是："+this.admin.sPassword)
				const res = this.$myRequest({
					url:'/admin/login',
					method:'POST',
					data:{
						"jobId":this.admin.sId,
						"password": this.admin.sPassword,
					},
				}).then(res=>{
					if(res){
						console.log(res.data.data.name+"res.data")
					}
					uni.setStorage({
						key:"admin",
						data:res.data.data
					})
					uni.switchTab({
							url:'../index/index'
					})
				})
			
				
				if(this.userId==''){
					uni.showToast({
						icon:'error',
						title:'未输入账号！'
					})
				}
				if(this.userPassword==''){
					uni.showToast({
						icon:'error',
						title:'未输入密码！'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	
	page {
		background-color: #FAFAFA;
	}
		
	.icon{
		background-size: cover;
	}
	.top{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 450rpx;
		background: linear-gradient(#2196F3,#64B5F6);
		.icon{
			width: 130rpx;
			height: 130rpx;
			background-image: url("data:image/svg+xml,%3Csvg t='1647950744800' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='10830' width='64' height='64'%3E%3Cpath d='M0.00001 512.077A511.923 511.923 0 1 0 511.92301 0 511.974 511.974 0 0 0 0.00001 512.077z' fill='%23FFFFFF' p-id='10831'%3E%3C/path%3E%3Cpath d='M887.49001 857.89c-13.697-71.82-139.895-140.459-253.165-177.96-5.54-1.846-40.014-17.339-18.417-82.798 56.43-57.815 99.214-150.924 99.214-242.597 0-140.82-93.827-214.742-202.891-214.742s-202.635 73.82-202.635 214.742c0 91.98 42.784 185.45 99.317 243.162 22.059 57.712-17.34 79.207-25.65 82.08-107.73 38.834-232.903 107.73-246.702 177.96a511.307 511.307 0 1 1 887.49-346.635 507.87 507.87 0 0 1-136.56 346.788' fill='%23B8D4FF' p-id='10832'%3E%3C/path%3E%3C/svg%3E");
			border-radius: 50%;
			box-shadow: 2px 2px 5px rgba(18, 18, 18, 0.2);
		}
		.title{
			color: #fff;
			font-size: 38rpx;
			margin-top: 30rpx;
		}
	}
	.main{
		margin: -80rpx 30rpx 0 30rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10px;
		box-shadow: 0 0 5px rgba(18, 18, 18, 0.2);
		.content{
			padding-top: 10rpx;
			.user,
			.password{
				display: flex;
				align-items: center;
				height: 110rpx;
				border-bottom: 1rpx solid #eee;
				margin-top: 20rpx;
				.icon{
					width: 35rpx;
					height: 35rpx;
					margin-right: 20rpx;
				}
				input{
					flex: 1;
				}
			}
			.user .icon{
				background-image: url("data:image/svg+xml,%3Csvg t='1647952796463' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='11756' width='32' height='32'%3E%3Cpath d='M504.59685925 253.55757036m-207.0452148 0a207.04521482 207.04521482 0 1 0 414.09042963 0 207.04521482 207.04521482 0 1 0-414.09042963 0Z' p-id='11757' fill='%238a8a8a'%3E%3C/path%3E%3Cpath d='M856.54945185 647.38038517C656.42192592 519.8279111 658.4850963 519.8279111 514.42725925 519.8279111c-141.63057778 0-141.99466667 0-358.02074073 132.64971852-47.81700741 31.7970963-75.85185185 188.59804445-75.85185185 230.22554074 0 108.86257778 192.48165925 78.88592592 429.86761481 78.88592593s429.86761482 29.97665185 429.86761482-78.88592593c0.12136297-43.93339259-31.06891852-202.67614815-83.74044445-235.32278519z' p-id='11758' fill='%238a8a8a'%3E%3C/path%3E%3C/svg%3E");
			}
			.password .icon{
				background-image: url("data:image/svg+xml,%3Csvg t='1647952928187' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='13066' width='32' height='32'%3E%3Cpath d='M822.857143 402.285714h-36.571429v-128a274.285714 274.285714 0 0 0-548.571428 0v128h-36.571429a109.714286 109.714286 0 0 0-109.714286 109.714286v91.428571a420.571429 420.571429 0 0 0 841.142858 0v-91.428571a109.714286 109.714286 0 0 0-109.714286-109.714286z m-475.428572-128a164.571429 164.571429 0 0 1 329.142858 0v128H347.428571z m201.142858 457.142857a36.571429 36.571429 0 0 1-73.142858 0v-146.285714a36.571429 36.571429 0 0 1 73.142858 0z' p-id='13067' fill='%238a8a8a'%3E%3C/path%3E%3C/svg%3E");
			}
			
		}
		.forget{
			height: 80rpx;
			line-height: 80rpx;
			text-align: right;
			color: #9E9E9E;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
		.button{
			margin: 30rpx 30rpx;
			.register,
			.login{
				height: 90rpx;
				background-color:#2196F3 ;
				color: #fff;
				border-radius: 5px;
				margin-bottom: 30rpx;
				
			}
			.login{
				box-shadow: 0 1px 3px rgba(18, 18, 18, 0.2);
			}
			.register{
				background-color: #fff;
				border: 2rpx solid #2196F3;
				color: #2196F3
			}
		}
	}
	.active .swiper-tab-line[data-v-5d4f3be2] {
	    border-bottom: 3px solid #bd2315;
	    width: 85px;
	    float: left;
	    margin: 5px 5px;
	    border-top: 1px solid #ffc226;
	    border-radius: 10px;
	}
</style>
